@import "variables.scss";

article.project-card {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  width: 100%;
  max-width: $project-preview-width;
  margin: 0;

  padding: 0 0.5em 0.5em 0.5em;
  background-color: $color-bg-light;
  border-style: solid;
  border-width: 0px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: $box-shadow;

  @media screen and (max-width: 500px) {
    font-size: 17px;
  }

  * {
    margin: 0;
  }

  .project-card-content {
    margin-top: 0.2em;
    flex-grow: 1;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;

    h3 {
      color: $color-text-dark-primary;
      font-weight: 800;
    }
    h4 {
      color: $color-text-dark-secondary;
      font-weight: 600;
    }
    p {
      color: $color-text-dark-secondary;
      font-weight: 500;
      text-align: left;
    }

    .top-aligned {
      .project-card-header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        font-size: 0.9rem;

        .project-card-links {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: stretch;
          & > * {
            margin-right: 0.5em;
          }
          :last-child {
            margin-right: 0;
          }
        }
      }

      .project-card-body {
        margin-top: 0.5em;
      }
    }

    .bottom-aligned.project-card-tags {
      margin-top: 0.5em;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-end;
      & > * {
        margin: 0;
        margin-right: 0.5em;
        margin-top: 0.35em;
      }
      :last-child {
        margin-right: 0;
      }
    }
  }

  img.project-card-img {
    flex-shrink: 0;
    align-self: center;
    object-fit: cover;
    height: 180px;
    width: $project-preview-width;
    cursor: pointer;
  }
}
